<template>
  <div class="hello">
    <button @click="showInfo">我是个按钮</button>
  </div>
</template>

<script>
import {mapState,mapGetters,mapActions} from 'vuex'
import store from '@/store'
//mapState:相当于store下modules里所有的值的子集，内部值为需要使用的值，返回的值是对象，...mapState(['test','name'])
//mapGetters:在getters文件里预设的state值，直接取用即可，或者使用store.getters.xxxx来获取对象
//以上是放在computed里面的
//下面是放在methods里的
//mapActions：把actions的方法提取出来，可以直接使用
//mapMutations：同上
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      flag:true
    }
  },
  created(){
    this.flag = false
    this.showInfo()
  },
  methods:{
    ...mapActions(['setName1']),
    showInfo(){
      if(this.flag){
        alert(1)
        this.setName1('我点击了按钮')
      }
      console.error('this.xxxx',this.xxxx)
      // console.warn(this.test)
      this.flag = true
    },
  },
  computed:{
    // ...mapState({name:state => state.test.name})
    // ...mapState(['test','name']),
    ...mapGetters(['xxxx']),
    
  },
  watch:{
    xxxx(newVal){
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
